<template>
    <div>
        <header>
            <van-icon name="arrow-left" @click="left"/>
            <h3>我的收藏</h3>
            <div></div>
        </header>
        <div style="height: 11.73333vw;"></div>

        <main>
            <div v-for="(item, index) in list" :key="index" v-show="show">
                <p>
                    <span @click="godetails(item.course_id)">{{item.title}}</span>
                    <van-icon name="star" color="red" @click="Nocollect(item.collect_id,index)"/>
                </p>
                <p
                        style="margin-top:10px;font-size:3vw"
                        @click="godetails(item.course_id)"
                >共{{item.section_num}}课时</p>
                <p class="teacher" @click="godetails(item.course_id)">
                    <img :src="item.teachersAvatar" alt/>
                    <span>{{item.teachers}}</span>
                </p>

                <p class="price" @click="godetails(item.course_id)">
                    <span>{{item.sales_num}}人已报名</span>
                    <span style="text-align: right;font-size: 4.66667vw;color: #ee1f1f;">
            <img
                    width="10px"
                    src="https://msmk2019.oss-cn-shanghai.aliyuncs.com/uploads/image/20191HHDExgz0u1567065946.png"
                    alt
            />
            {{item.price/100}}.00
          </span>
                </p>
            </div>
            <h3 v-show="!show">暂无收藏</h3>
        </main>
    </div>
</template>

<script>
    import Excellent from "../../components/home/Excellent";

    export default {
        components: {
            Excellent,
        },
        data() {
            return {};
        },
        computed: {
            list: function () {
                return this.$store.state.collect.list;
            },
            show: function () {
                return this.$store.state.collect.show;
            },
        },
        mounted() {
            this.$store.dispatch("Collect");
        },
        methods: {
            left() {
                window.history.back();
            },

            //课程跳转详情
            godetails(id) {
                console.log(id);
                this.$router.push({
                    path: "/course",
                    query: {
                        id,
                    },
                });
            },

            //取消收藏
            Nocollect(id, index) {
                this.$store.dispatch('delcollect', index)

                this.$HTTP.cancelCollect(`${id}/1`).then(res => {
                    console.log(res)
                })
            },
        },
    };
</script>

<style lang="scss" scoped>
    header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        background: #fff;
        height: 11.73333vw;
        position: fixed;
        z-index: 999;
        align-items: center;
    }

    main {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        > div {
            width: 90%;
            background: #fff;
            margin-top: 20px;
            border-radius: 10px;
            padding: 20px;

            > p {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 4vw;

                > span {
                    width: 90%;
                }
            }
        }

        .teacher {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top: 6.66667vw;

            img {
                width: 7.46667vw;
                height: 7.46667vw;
                border-radius: 50%;
                margin-right: 10px;
            }

            > span {
                font-size: 2.93333vw;
                color: rgba(0, 0, 0, 0.45);
            }
        }

        .price {
            display: flex;
            justify-content: space-between;
            border-top: 1px solid #f5f5f5;
            margin-top: 0.4rem;
            padding-top: 5.33333vw;
        }
    }
</style>